<template>
  <div class="overturning" ref="rightOneEcharts"></div>

</template>

<script setup>
import { onMounted, ref} from 'vue';
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const rightOneEcharts = ref()
const diviceInfo = () => {
  let myChart = echarts.init(rightOneEcharts.value);
  var option = {
    series: [{
      type: 'liquidFill',
      center: ['28%',
        '50%'],
      radius: '60%',
      color: ['#7ca5ff',
        '#7ca5ff'],
      //水波颜色
      data: [0.4],
      itemStyle: {
        normal: {
          shadowBlur: 0
        }
      },
      label: {
        normal: {
          formatter: function(item) {
            //   return (item.value * 100).toFixed(1) + '%'
            return 12
          },
          color: '#fff',
          insideColor: '#fff',
          fontSize: 30
        }
      },
      backgroundStyle: {
        borderWidth: 2,
        borderColor: '#7ca5ff',
        color: 'rgb(255,0,255,0.01)'
      },
      outline: {
        borderDistance: 15,
        itemStyle: {
          borderWidth: 0,
          borderColor: '#7ca5ff',
          borderType: 'dashed',
        }
      },
    },
      {
        type: 'liquidFill',
        center: ['75%',
          '50%'],
        radius: '60%',
        color: ['#7ca5ff',
          '#7ca5ff'],
        //水波颜色
        data: [0.7],
        itemStyle: {
          normal: {
            shadowBlur: 0
          }
        },
        label: {
          normal: {
            formatter: function(item) {
              // return (item.value * 100).toFixed(1) + '%'
              return 20
            },
            // textStyle: {
            color: '#fff',
            insideColor: '#fff',
            fontSize: 30
            // }
          }
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: '#7ca5ff',
          color: 'rgb(255,0,255,0.01)'
        },
        outline: {
          borderDistance: 15,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#7ca5ff',
            borderType: 'dashed',
          }
        },
      },
    ]
  }
  window.addEventListener("resize", () => {
    // 自动渲染echarts
    myChart.resize();
  });
  myChart.setOption(option,true);
}

onMounted(()=>{
  // fanmai(fanmai2021);
  diviceInfo();
})
</script>
<style scoped>

</style>